<template>
  <view class="container screen-width">
    <view class="company-banner">
      <swiper indicator-dots circular autoplay interval="3000" class="swiper">
        <swiper-item v-for="(item,index) in companyInfo.carouselMap" :key="index">
          <image mode="widthFix" :src="getImageUrl(item)" @click="previewCarouse(index)" />
        </swiper-item>
      </swiper>
    </view>
    <view class="company-content">
      <view class="company-info flex items-middle space-between">
        <view class="flex items-middle">
          <view class="logo">
            <VIcon v-if="!companyInfo.companyLogo" size="120" color="#ccc" type="icon-qiye"></VIcon>
            <image v-else :src="getImageUrl(companyInfo.companyLogo)" />
          </view>
          <view class="title" @click="toCompanyDetail">
            <view class="name">{{ companyInfo.companyName }}</view>
            <view class="tips">{{ companyInfo.slogan || '未填写' }}</view>
          </view>
        </view>
        <view v-show="companyInfo.whetherCollect===0" class="collect-btn" @click="toCollect">收藏</view>
        <view v-show="companyInfo.whetherCollect===1" class="collect-btn" @click="cancelCollect">已收藏</view>
      </view>
      <!-- 公司简介 -->
      <view class="company-introduct">
        <view v-if="companyInfo.synopsis" class="express">
          <view class="info">
            <text :class="{hide:!iSinfo}">{{ companyInfo.synopsis || '未填写' }}</text>
            <view v-if="!iSinfo && companyInfo.synopsis.length > 50" class="tips" @click="showinfo">
              <VIcon size="28" color="#c6ccd8" type="icon-jiantouxia" />
            </view>
          </view>
          <view
            v-if="iSinfo && companyInfo.synopsis.length > 50"
            class="tips hidebtn"
            @click="showinfo"
          >
            <VIcon size="28" color="#c6ccd8" type="icon-jiantou-shang" />
          </view>
        </view>
      </view>
    </view>
    <!-- 企业联系人 -->
    <view class="company-person">
      <view v-if="companyInfo.claimInfo.id === null" class="create-card">
        <view class="create-btn" @click="toCreateCard">添加名片</view>
      </view>
      <view v-else class="card-content">
        <view class="list" @click="toPersonDetail">
          <view class="flex item items-middle">
            <view class="name">{{ companyInfo.claimInfo.name || '未填写' }}</view>
            <view class="post">{{ companyInfo.claimInfo.position || '未填写' }}</view>
          </view>
          <view class="flex item items-middle">
            <VIcon type="icon-dianhua" color="#1678ff" size="34" />
            <view class="lable">电话</view>
            <view class="lable-content">{{ companyInfo.claimInfo.phoneNumber || '未填写' }}</view>
          </view>
          <view class="flex item items-middle">
            <VIcon type="icon-email-s" color="#1678ff" size="34" />
            <view class="lable">邮件</view>
            <view class="lable-content">{{ companyInfo.claimInfo.email || '未填写' }}</view>
          </view>
          <view class="flex item items-top">
            <VIcon type="icon-dizhi" color="#1678ff" size="34" />
            <view class="lable">地址</view>
            <view class="lable-content">{{ companyInfo.claimInfo.companyAddress || '未填写' }}</view>
          </view>
        </view>
        <!-- <view class="person-btn" @click="toPersonList">查看企业更多联系人</view> -->
      </view>
    </view>
    <!-- 企业产品展示 -->
    <view class="company-product">
      <view class="company-num flex items-middle space-around">
        <view class="flex items-middle flex-col">
          <view class="icon flex flex-center items-middle">
            <VIcon type="icon-huo" color="#1678ff" size="46" />
            <view class="num">{{ companyInfo.popularity || 0 }}</view>
          </view>
          <text>人气</text>
        </view>
        <view class="flex items-middle flex-col">
          <view class="icon flex flex-center items-middle">
            <VIcon type="icon-shoucang1" color="#1678ff" size="46" />
            <view class="num">{{ companyInfo.collectTotal || 0 }}</view>
          </view>
          <text>收藏</text>
        </view>
        <view class="flex items-middle flex-col">
          <view class="icon flex flex-center items-middle">
            <VIcon type="icon-fenxiang" color="#1678ff" size="46" />
            <view class="num">{{ companyInfo.shareTotal || 0 }}</view>
          </view>
          <text>分享</text>
        </view>
      </view>
      <!-- 核心产品 -->
      <view class="product-content">
        <view class="title flex flex-col items-middle">
          <view>核心产品</view>
          <view class="line" />
        </view>
        <view class="product-list">
          <view v-for="(item,index) in companyInfo.coreProducts" :key="index" class="list-item">
            <img mode="widthFix" :src="getImageUrl(item.image)" @click="previewImage(index)" />
            <view class="pro-introduct">{{ item.name || '未填写' }}</view>
          </view>
        </view>
      </view>
    </view>
    <!-- 编辑按钮 -->
    <view
      v-if="companyInfo.whetherAdministrator === 1"
      class="edit-btn screen-width"
      @click="toEdit"
    >编辑企业信息</view>
    <Festival></Festival>
  </view>
</template>
<script>
import { userInfo } from "../../util/api/user";
import { imgUrl } from "@/util/api.js";
import { isWeixin, wxShareConfig } from "../../util/wx.js";
import {
  getCompanyBusinessCardInfo,
  collectCompanyBusinessCard,
  cancelCollectCompanyBusinessCard,
  shareBusinessCard
} from "../../util/api/company";
import { getImage } from "@/util/getImage.js";
export default {
  data() {
    return {
      companyId: "",
      companyInfo: {
        claimInfo: {
          id: ""
        },
        companyLogo: "",
        coreProducts: [],
        carouselMap: [],
        synopsis: ""
      },
      iSinfo: false,
      userInfo: {},
      imgUrl: imgUrl
    };
  },
  onLoad(e) {
    this.companyId = e.companyId;
  },
  onShow() {
    if (this.companyId) {
      this.getCompanyDetail();
    }
    this.getUserInfo();
  },
  methods: {
    getImageUrl(url) {
      return getImage(url);
    },
    // 预览轮播图
    previewCarouse(index) {
      let photoList = this.companyInfo.carouselMap.map(item => {
        let newImg = this.imgUrl + item;
        return newImg;
      });
      WeixinJSBridge.invoke("imagePreview", {
        urls: photoList,
        current: index
      });
    },
    // 预览产品图
    previewImage(index) {
      let photoList = this.companyInfo.coreProducts.map(item => {
        let newImg = this.imgUrl + item.image;
        return newImg;
      });
      WeixinJSBridge.invoke("imagePreview", {
        urls: photoList,
        current: index
      });
    },
    // 去名片详情页
    toPersonDetail() {
      if (this.companyInfo.claimInfo.id === null) {
        uni.showToast({
          title: "该企业还未添加联系人",
          icon: "none"
        });
        return;
      }
      uni.navigateTo({
        url: "/pages/person/modified?id=" + this.companyInfo.claimInfo.id
      });
    },
    // 查看是否有个人名片
    async getUserInfo() {
      const data = await userInfo();
      this.userInfo = data.result;
    },
    // 全文展开收起
    showinfo() {
      this.iSinfo = !this.iSinfo;
    },
    // 获取企业详情
    async getCompanyDetail() {
      let that = this;
      const data = await getCompanyBusinessCardInfo({
        companyId: this.companyId
      });
      this.companyInfo = data.result;
      if (this.companyInfo.whetherAdministrator === 0) {
        this.companyShare();
      }
      if (this.companyInfo.companyLogo) {
        if (isWeixin()) {
          this.initShareConfig();
        }
      }
    },
    // 编辑
    toEdit() {
      uni.navigateTo({
        url: `/pages/companyWeb/Edit?companyId=${this.companyId}`
      });
    },
    // 去企业详情
    toCompanyDetail() {
      uni.navigateTo({
        url: `/pages/enterpriseDetails/brand_detail?id=${this.companyId}&type=1&liIndex=0&showNew=true`
      });
    },
    // 收藏企业
    toCollect() {
      let token = this.$getToken();
      if (!token) {
        uni.showToast({
          title: "您还没有登录，请登录后操作",
          duration: 2000,
          icon: "none"
        });
        setTimeout(() => {
          uni.setStorageSync("pageUrl", window.location.href);
          uni.navigateTo({
            url: "/pages/login/index"
          });
        }, 2000);
        return;
      }
      collectCompanyBusinessCard({
        id: this.companyInfo.id
      }).then(res => {
        if (res.code === 200) {
          uni.showToast({
            title: "收藏企业名片成功",
            icon: "none"
          });
          this.getCompanyDetail();
        }
      });
    },
    cancelCollect() {
      cancelCollectCompanyBusinessCard({
        id: this.companyInfo.id
      }).then(res => {
        if (res.code === 200) {
          uni.showToast({
            title: "已取消收藏该企业名片",
            icon: "none"
          });
          this.getCompanyDetail();
        }
      });
    },
    // 去创建个人名片页面
    toCreateCard() {
      if (this.userInfo.whetherExistBusinessCard) {
        uni.navigateTo({
          url: "/pages/person/CardList"
        });
      } else {
        uni.navigateTo({
          url:
            "/pages/person/editCard?isEdit=" +
            0 +
            "&name=" +
            this.companyInfo.companyName +
            "&id=" +
            this.companyInfo.companyId
        });
      }
    },
    toPersonList() {
      if (this.companyInfo.claimInfo.id === null) {
        uni.showToast({
          title: "该企业还未添加联系人",
          icon: "none"
        });
        return;
      }
      uni.navigateTo({
        url: `./PersonList?companyId=${this.companyInfo.companyId}&isShow=${this.companyInfo.whetherAdministrator}`
      });
    },
    // 企业名片分享
    companyShare() {
      shareBusinessCard({
        businessCardId: this.companyInfo.id,
        type: "1"
      });
    },
    // 微信分享
    initShareConfig() {
      let _this = this;
      let img;

      let windowurl = window.location.href.split("#")[0];
      uni.request({
        url: "https://oldm.51bmj.cn/WeiXin/GetClientSign", //仅为示例，并非真实接口地址。
        data: {
          rawUrl: windowurl
        },
        dataType: "json",
        header: {
          "X-Requested-With": "XMLHttpRequest"
        },
        method: "GET",
        success: res => {
          if (res.statusCode == 200) {
            let { data } = res;
            let shareInfo = {
              title: "企业微名片",
              desc: _this.companyInfo.companyName,
              imgUrl: _this.companyInfo.companyLogo
                ? _this.imgUrl + _this.companyInfo.companyLogo
                : "https://dm-bmj.oss-cn-guangzhou.aliyuncs.com/bmj.jpg",
              link: window.location.href
            };
            wxShareConfig(this.$wx, data, shareInfo);
          }
        }
      });
    }
  }
};
</script>
<style lang="less" scoped src="./index.less"></style>
